<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Dashboard</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #333333;
        }

        form {
            margin-bottom: 20px;
        }

        input[type="file"] {
            display: none;
        }

        .custom-file-upload {
            display: inline-block;
            padding: 10px 20px;
            cursor: pointer;
            background-color: #4CAF50;
            color: #ffffff;
            border-radius: 4px;
            border: none;
            transition: background-color 0.3s ease;
        }

        .custom-file-upload:hover {
            background-color: #45a049;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #dddddd;
        }

        .action-btns a {
            margin-right: 10px;
            color: #333333;
            text-decoration: none;
            padding: 5px 10px;
            background-color: #dddddd;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .action-btns a:hover {
            background-color: #cccccc;
        }

        .logout-btn {
            margin-top: 20px;
        }
    </style>

</head>
<body>
<div class="container">
    <h2>User Dashboard</h2>

    <!-- 用户上传表单 -->
    <form id="uploadForm" action="/file/upload" method="post" enctype="multipart/form-data">
        <!-- 选择上传文件 -->
        <label for="file-upload" class="custom-file-upload">
            Upload File
        </label>
        <input type="file" name="file" id="file-upload" style="display: none;"  required>
        <input type="hidden" name="userId" th:value="${happy.userId}">
        <input type="hidden" name="username" th:value="${happy.name}">
<!--        <button class="choose-file-button" >选择文件</button>-->
        <!-- 提交按钮 -->
        <button class="upload-file-button" th:attr="data-user-upload-id=${happy.userId}, data-upload-user-name=${happy.name}" type="submit">提交文件</button>
    </form>

    <!-- 用户文件列表 -->
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
        </thead>
        <div th:text="${happy.userId}">
        </div>
        <tbody>
        <!-- 使用Thymeleaf的循环指令遍历文件列表 -->
        <tr th:each="file : ${files}">
            <td th:text="${file.getFileName()}"></td>
            <td class="action-btns">
                <!-- 预览和下载链接 -->
                <a th:href="@{'/preview/' + ${file.getId()}}">Preview</a>

                <button class="download-file-button"  th:attr="data-file-download-id=${file.snowflakeId},data-user-name=${happy.name}">下载文件</button>
                <!-- 删除链接 -->
                <button class="delete-file-button"  th:attr="data-file-id=${file.snowflakeId}">删除文件</button>
<!--                &lt;!&ndash; 公共空间 &ndash;&gt;-->
<!--                <a th:href="@{'/public/' + ${file.id}}">Public Room</a>-->
<!--                &lt;!&ndash; 回收站 &ndash;&gt;-->
<!--                <a th:href="@{'/recycle/' + ${file.id}}">Recycle Bin</a>-->
            </td>
        </tr>
        </tbody>
    </table>

    <div class="logout-btn">
        <a href="/logout">Logout</a>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // 绑定删除按钮的点击事件
        $('.delete-file-button').click(function() {
            var fileId = $(this).data('file-id');
            deleteFile(fileId); // 调用删除文件的函数，并传递文件ID
        });

        // 删除文件的函数
        function deleteFile(fileId) {
            // 发送Ajax请求到后端API
            $.ajax({
                url: '/file/deleteFile',
                type: 'POST',
                data: { fileId: fileId },
                success: function(response) {
                    // 处理删除成功后的逻辑
                    console.log('文件删除成功');
                    location.reload();
                },
                error: function(xhr) {
                    // 处理删除失败后的逻辑
                    console.error('文件删除失败');
                }
            });
        }

        //绑定下载按钮的点击事件
        $('.download-file-button').click(function () {
            // 获取表单中的数据
            var account = $(this).data('user-name');
            var fileId = $(this).data('file-download-id');

            // 构建要发送的数据
            var data = {
                account: account,
                fileId: fileId
            };

            // 发送 POST 请求到 /file/download
            $.ajax({
                type: 'POST',
                url: '/mq/downLoad',
                data: data,
                success: function (response) {
                    // 处理成功响应
                    console.log("Download successful!");
                    location.reload();
                    // 这里可以根据响应的内容执行进一步的操作
                },
                error: function () {
                    // 处理错误响应
                    console.log("Download failed!");
                    // 这里可以根据错误情况执行相应的操作
                }
            });
        });

        $('.upload-file-button').click(function() {
            console.info("提交上传");
            var fileInput = document.getElementById("file-upload");
            var userId = $(this).data('user-upload-id');
            var username = $(this).data('upload-user-name');
            console.info("userId="+userId+";username="+username);

            var data = {
                file: fileInput.files[0],
                userId: userId,
                username: username
            };

            // 发送 AJAX 请求
            // $.ajax({
            //     url: "/file/upload",
            //     type: "POST",
            //     data: data,
            //     success: function(response) {
            //         // 处理成功响应
            //         console.log("文件上传成功");
            //         // location.reload(); // 刷新页面或者执行其他操作
            //     },
            //     error: function() {
            //         // 处理错误响应
            //         console.log("文件上传失败");
            //         // 这里可以根据错误情况执行相应的操作
            //     }
            // });

            // uploadFile(fileInput, userId, username); // 调用删除文件的函数，并传递文件ID
        });

        //文件上传按钮点击事件
        // function uploadFile(fileInput, userId, username) {
        //
        //     // // 创建 FormData 对象，用于包装文件和其他数据
        //     // var formData = new FormData();
        //     // formData.append("file", fileInput.files[0]); // 添加文件
        //     // formData.append("userId", userId); // 添加 userId
        //     // formData.append("username", username); // 添加 username
        //
        //
        // }


    });
</script>

</body>
</html>